<template>
	<div class="video-details-area">
		<div class="video-main">
			<video-player :options="videoOptions"></video-player>
		</div>
		<div class="detail-doc">
			<h3 class="doc-title">这里只有伟大的车主 (一)</h3>
			<em class="doc-sub">起死回生的桑塔纳</em>
			<div class="doc-main">
				<p>起死回生的桑塔纳起死回生的桑塔纳起死回生的桑塔纳起死回生的桑塔纳起死回生的桑塔纳起死回生的桑塔纳起死回生的桑塔纳起死回生的桑塔纳起死回生的桑塔纳起死回生的桑塔纳起死回生的桑塔纳起死回生的桑塔纳起死回生的桑塔纳起死回生的桑塔纳起死回生的桑塔纳起死回生的桑塔纳起死回生的桑塔纳起死回生的桑塔纳起死回生的桑塔纳起死回生的桑塔纳起死回生的桑塔纳起死回生的桑塔纳起死回生的桑塔纳起死回生的桑塔纳起死回生的桑塔纳起死回生的桑塔纳起死回生的桑塔纳起死回生的桑塔纳起死回生的桑塔纳起死回生的桑塔纳起死回生的桑塔纳起死回生的桑塔纳起死回生的桑塔纳起死回生的桑塔纳起死回生的桑塔纳起死回生的桑塔纳起死回生的桑塔纳起死回生的桑塔纳起死回生的桑塔纳</p>
			</div>
			<div class="doc-play-msg"><i class="msg-icon"></i><span class="play-count">23.17万</span></div>
			<a href="javascript:;" class="more-btn">∨</a>
		</div>
		<div class="recommend">
			<h2 class="column-title">相关推荐</h2>
			<ul class="recommend-list">
				<li class="list-item">
					<a href="#" class="item-link">
						<img src="" alt="" class="item-img" width="100%" />
						<h3 class="item-title">这里只有伟大的车主 (一)</h3>
						<span class="item-sub">起死回生的桑塔纳</span>
						<div class="play-msg"><i class="msg-icon"></i>23.17万</div>
					</a>
				</li>
				<li class="list-item">
					<a href="#" class="item-link">
						<img src="" alt="" class="item-img" width="100%" />
						<h3 class="item-title">这里只有伟大的车主 (一)</h3>
						<span class="item-sub">起死回生的桑塔纳</span>
						<div class="play-msg"><i class="msg-icon"></i>23.17万</div>
					</a>
				</li>
				<li class="list-item">
					<a href="#" class="item-link">
						<img src="" alt="" class="item-img" width="100%" />
						<h3 class="item-title">这里只有伟大的车主 (一)</h3>
						<span class="item-sub">起死回生的桑塔纳</span>
						<div class="play-msg"><i class="msg-icon"></i>23.17万</div>
					</a>
				</li>
			</ul> 
		</div>
	</div>
</template>

<script>
//共用方法
import common from '../../../utils/common.js';
import { videoPlayer } from 'vue-video-player';
import Vue from 'vue';
export default {
	components:{
		videoPlayer
	},
	data() {
		return {
			videoOptions: {
		        source: [
		          { type: "video/mp4", src: 'http://s3.cximg.com/cms/mallweb_Html5/resource/cxfbgame/video/video1.mp4', label: '原画', res: 1 },
		          { type: "video/mp4", src: 'http://s3.cximg.com/cms/mallweb_Html5/resource/cxfbgame/video/video1.mp4', label: '高清', res: 1 },
		          { type: "video/mp4", src: 'http://s3.cximg.com/cms/mallweb_Html5/resource/cxfbgame/video/video1.mp4', label: '超清', res: 1 }
		        ],
		        language: 'zh-CN',
		        autoplay: false,
		        poster: 'http://cn.vuejs.org/images/logo.png',
		        defaultSrcReId: 2,
		        height:217
	    	}
		}
	},
	ready:function(){
		this.videoInit();
	},
	methods:{
		videoInit:function(){
			
		}
	}

}
</script>

<style lang="scss" scoped>
	@import "../../../assets/css/_functions.scss";
	@import "../../../assets/css/_variables.scss";
	@import "../../../assets/css/toast.scss";
	$fontSize14:rem(14);
	$fontSize12: rem(12);
	@mixin ban_line{
		overflow:hidden;
		text-overflow:ellipsis;
		white-space:nowrap;
	}
	.video-main{
		width:100%;
		height:rem(217);
		overflow:hidden;
		background:#000;
		margin-bottom:rem(18);
		.video-box{
			width:100%;
		}
		.video-js{

		}
	}

	//自定义按钮
	.vjs-default-skin .vjs-big-play-button{

	}
	
	.detail-doc{
		padding:0 rem(15);
		position:relative;
		.doc-title{
			width:rem(170);
			line-height:rem(20);
			font-size:$fontSize14;
			color:#243742;
			display:block;
			@include ban_line;//省略号
		}
		.doc-sub{
			width:rem(170);
			line-height:rem(17);
			font-size:$fontSize12;
			color:#8392a0;
			display:block;
			margin-bottom:rem(13);
			@include ban_line;//省略号
		}
		.more-btn{
			width:rem(20);
			height:rem(20);
			display:block;
			position:absolute;
			top:0;
			right:rem(20);
			background:#000;
		}
	}
	.doc-main{
		height:rem(51);
		overflow:hidden;
		p{
			line-height:rem(18);
			font-size:$fontSize12 !important;
			color:#8392a0 !important;
		}
	}
	.doc-play-msg{
		margin-top:rem(12);
		padding-top:rem(12);
		border-top:1px solid #dedede;
	}
	.recommend{
		padding:rem(15);
		.column-title{
			width:rem(170);
			margin-bottom:rem(13);
			font-size:$fontSize14;
			color:#243742;
			@include ban_line;//省略号
		}
	}
	.recommend-list{
		width:100%;
		overflow:hidden;
		margin-top:rem(13);
		.list-item{
			width:100%;
			height:rem(260);
			overflow:hidden;
			display:block;
			.item-link{
				width:100%;
				height:100%;
				display:block;
				overflow:hidden;
			}
			.item-img{
				width:100%;
				height:rem(160);
				display:block;
				clear:both;
				margin-bottom:rem(12);
			}
			.item-title{
				width:rem(170);
				line-height:rem(20);
				font-size:$fontSize14;
				color:#243742;
				display:block;
				@include ban_line;//省略号
			}
			.item-sub{
				width:rem(170);
				line-height:rem(17);
				font-size:$fontSize12;
				color:#8392a0;
				display:block;
				margin-bottom:rem(13);
				@include ban_line;//省略号
			}
			.play-msg{
				width:rem(100);
				font-size:$fontSize12;
				color:#8392a0;
				@include ban_line;//省略号
			}
		}
	}
</style>